<template>
  <div>
<h2>{{ fullName }}</h2>
<button @click="changeName">改名</button>

<input type="text" v-model="fullName">
  </div>
</template>

<script>
import { computed, ref } from 'vue'
export default {
  setup () {
    const firstName=ref('张')
    const lastName=ref('三')

    // const fullName=computed(()=>{
    //   return firstName.value+lastName.value
    // })

      let fullName=computed({  //computed也是响应式的
        get:()=>{
          return firstName.value+lastName.value
        },
        set:(newVal)=>{
          // 如果想修改fullName这个计算属性，需这样做，让get()重新触发
          // fullName的值发生变化,那么就会执行set()
         console.log(newVal); 
          lastName.value+=newVal
         
          // const names=newVal.split('-')
          // firstName.value=names[0]
          // lastName.value=names[1]
        }
      })

    const changeName=()=>{
    // lastName.value='五五'
    fullName.value='李-思思'
    }

    return {
      fullName,
      changeName
    }
  }
}
</script>

<style lang="scss" scoped>

</style>